<template>
    <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="80px"
    >
        <el-form-item prop="date" :label="$t('m.label.date')"  label-width="45px">
            <datePicker
                :form="ruleForm"
                formId="date"
                startTime="startDate"
                endTime="endDate"
                valueformat="timestamp"
                size='small'
            ></datePicker>
        </el-form-item>
        <el-form-item :label="$t('m.label.account')" prop="brandIdList">
            <account :form="ruleForm" formId="brandIdList" :multiple="true" addSize="mini" size='small'></account>
        </el-form-item>
        <el-form-item prop="countryIdList" :label="$t('m.label.country')">
            <country :form="ruleForm" formId="countryIdList" :multiple="true" addSize="mini" size='small'></country>
        </el-form-item>
        <el-form-item :label="$t('m.label.Status')" prop="shipmentStatusId">
            <el-select v-model="ruleForm.shipmentStatusId" :placeholder="$t('m.placeholder.selectStatus')" clearable size='small'>
                <el-option
                    v-for="item in arrData.findAllShipmentStatus"
                    :key="item.amzShipmentStatusId"
                    :label="item.amzShipmentStatus"
                    :value="item.amzShipmentStatusId"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.label.shipmentNumber')" prop="shipmentId">
            <el-input v-model="ruleForm.shipmentId" :placeholder="$t('m.placeholder.pleaseEnteShipmentNumber')" size='small'></el-input>
        </el-form-item>
        <el-form-item prop="businessUnitList" :label="$t('m.label.BU')">
            <BU
                :form="ruleForm"
                formId="businessUnitList"
                :multiple="true"
                addSize="mini"
                @selectAll="getCategory"
                @selectDel="getCategory"
                size='small'
            ></BU>
        </el-form-item>
        <el-form-item prop="productCategoryIdList" :label="$t('m.label.productCategory')">
            <category
                ref="category"
                :form="ruleForm"
                formId="productCategoryIdList"
                formBU="businessUnitList"
                :multiple="true"
                @selectAll="getProduct"
                @selectDel="getProduct"
                addSize="mini"
                size='small'
            ></category>
        </el-form-item>
        <el-form-item prop="productIdList" :label="$t('m.label.productModelNumber')">
            <product
                ref="product"
                formId="productIdList"
                formBU="businessUnitList"
                formCategory="productCategoryIdList"
                :form="ruleForm"
                :multiple="true"
                @selectAll="getASIN"
                @selectDel="getASIN"
                addSize="mini"
                size='small'
            ></product>
        </el-form-item>
        <el-form-item prop="asinIdList" :label="$t('m.label.ASIN')">
            <ASIN
                ref="ASIN"
                formId="asinIdList"
                formBU="businessUnitList"
                formCategory="productCategoryIdList"
                formProduct="productIdList"
                :form="ruleForm"
                :multiple="true"
                @selectAll="getSKU"
                @selectDel="getSKU"
                addSize="mini"
                size='small'
            ></ASIN>
        </el-form-item>
        <el-form-item prop="sellerSkuIdList" :label="$t('m.label.SKU')">
            <SKU
                ref="SKU"
                formId="sellerSkuIdList"
                formBU="businessUnitList"
                formCategory="productCategoryIdList"
                formProduct="productIdList"
                formASIN="asinIdList"
                :form="ruleForm"
                :multiple="true"
                @selectAll="getReverse"
                @selectDel="getReverse"
                addSize="mini"
                size='small'
            ></SKU>
        </el-form-item>
        <el-form-item label-width="10px" style="width: auto;">
            <el-button type="primary" @click="_submitForm" icon="el-icon-search" size='small'>{{$t('m.button.search')}}</el-button>
        </el-form-item>
        <el-form-item label-width="10px" style="width: auto;">
            <el-button @click="resetForm('ruleForm')" icon="el-icon-circle-close" size='small'>{{$t('m.button.reset')}}</el-button>
        </el-form-item>
        <el-form-item label-width="10px" style="width: auto;">
            <upload @handleSelectedFile="uploadxlsx" :title="$t('m.excel.uploadTrackingNumber')" size='small'></upload>
        </el-form-item>
        <el-form-item label-width="20px" style="width: auto;">
            <el-checkbox v-model="ruleForm.perUnit" @change="_submitForm()">{{$t('m.label.displaySummaryData')}}</el-checkbox>
        </el-form-item>
    </el-form>
</template> 
 <script>
import {
    account,
    BU,
    category,
    product,
    ASIN,
    SKU,
    country,
    datePicker
} from "components/searchfor";
const ERR_OK = 200;
export default {
    data() {
        return {
            shipmentStatusId: "",
            ruleForm: {
                businessUnitList: [],
                productCategoryIdList: [],
                productIdList: [],
                asinIdList: [],
                sellerSkuIdList: [],
                startDate: "",
                endDate: "",
                date: [],
                brandIdList: [],
                countryIdList: [],
                perUnit: true,
                shipmentStatusId: "",
                shipmentId: ""
            },
            arrData: {
                findAllShipmentStatus: []
            }
        };
    },
    created() {
        this.getFindAllShipmentStatus();
    },
    methods: {
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
            this.$refs.SKU.getSku();
        },
        getProduct() {
            this.$refs.category.getCategory(true);
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
            this.$refs.SKU.getSku();
        },
        getASIN() {
            this.$refs.product.getProduct(true);
            this.$refs.ASIN.getASIN();
            this.$refs.SKU.getSku();
        },
        getSKU() {
            this.$refs.ASIN.getASIN(true);
            this.$refs.SKU.getSku();
        },
        getReverse() {
            this.$refs.SKU.getSku(true);
        },
        uploadxlsx(convertedData) {
            let data = convertedData.map(item => {
                return {
                    trackingId: item.trackingId
                        ? item.trackingId.toString().replace(/\n/g,",").replace(/\s*/g, "")
                        : "",
                    shipmentId: item.ShipmentID
                        ? item.ShipmentID.toString().replace(/\s*/g, "")
                        : "",
                    trackingType: item.trackingType
                        ? item.trackingType.toString().replace(/\s*/g, "")
                        : ""
                };
            }); 
            this.$ajax({
                method: "post",
                url:
                    this.GLOBAL.orderAndOverseaService +
                    "/importShipment/importTracking",
                data: {
                    param: data
                }
            }).then(res => {
                if (res.data.code === ERR_OK) {
                    this._submitForm();
                    this.$refs.upload.success();
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 获取状态
        getFindAllShipmentStatus() {
            this.$ajax
                .get(
                    this.GLOBAL.orderAndOverseaService +
                        "/queryBasisData/findAllShipmentStatus"
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.arrData.findAllShipmentStatus = res.data.data;
                    }
                });
        },
        // 提交查询
        _submitForm() {
            this.$emit("submitForm", this.ruleForm);
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCategory();
        }
    },
    components: {
        upload: resolve => require(["components/xlsx/upload.vue"], resolve),
        account,
        BU,
        category,
        product,
        ASIN,
        SKU,
        country,
        datePicker
    }
};
</script>
 <style lang="stylus" scoped>
   .el-date-editor--daterange.el-input__inner {
         width: 230px;
     }
     .el-form-item {
         display: inline-block;
         margin-bottom: 0;
     }
</style>
